<template>
  <div class="buttons">
    <el-button type="primary">新增</el-button>
  </div>
  <el-table :data="listData" border style="width: 100%">
    <el-table-column prop="id" label="购票序号"></el-table-column>
    <el-table-column prop="content" label="购票详情"></el-table-column>
    <el-table-column prop="people" label="购票人"></el-table-column>
    <el-table-column prop="time" label="购票时间"></el-table-column>
    <el-table-column label="操作">
      <el-button type="warning">修改</el-button>
      <el-button type="danger">删除</el-button>
    </el-table-column>
  </el-table>
</template>

<script>
import { reactive } from "@vue/reactivity";
export default {
  setup() {
    let listData = reactive([
      { id: "", content: "", people: "", time: "" },
      { id: "", content: "", people: "", time: "" },
    ]);

    function goToCreate() {
      console.log("create");
    }

    function goToModify(no) {
      console.log("modify", no);
    }

    function delData(no) {
      console.log("delete", no);
      this.$alert("是否要删除该数据?", "确认删除", {
        confirmButtonText: "确定",
        callback: () => {
          // 删除api
          this.$messaage({
            type: "info",
            message: "已删除",
          });
        },
      });
    }

    return { listData, goToCreate, goToModify, delData };
  },
};
</script>
<style>
.buttons {
  margin-bottom: 5px;
}
</style>